<template>
    <div>
        <el-menu style="width: 100%;" :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
            @select="handleSelect">
            <template v-for="item in customSonMenu" :key="item.path">
                <el-menu-item :index="item.path" @click="handMenuClick">{{ item.meta.title }}</el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive} from "vue"
import { storeToRefs } from 'pinia';
import { menuStore } from "@/store/menu"
const activeIndex=ref()
const { customSonMenu } = storeToRefs(menuStore())

const handleSelect=(item:any)=>{
    console.log(item);
    
}
const handMenuClick=(item:any)=>{
    console.log(item);
    
}
</script>

<style scoped>
div {
    color: #000;
}
</style>